<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
    <link href="ui-std.css" rel="stylesheet">
    <style>
        img {
            width: 100%;
            display: block;
        }

        header {
            position: fixed;
        }
    </style>
</head>
<body>
<header>
    <img src="Nav.png">
</header>
<div>
    <img src="http://img.meizhanggui.cc/8b4e4ca877a26bfb4043080923a79437">
</div>
<footer class="ui-v-a">
    <a class="ui-tab" i-tap="goto(#/home/)">
        <span class="fic fic-home"></span>

        <p>首页</p>
    </a>

    <div class="ui-tab">
        <span class="fic fic-cate"></span>

        <p>分类</p>
    </div>
    <a class="ui-tab" i-tap="goto(#/myself)">
        <span class="fic fic-me"></span>

        <p>我的</p>
    </a>
</footer>
<script>
    var h = $(window).width();

    setInterval(function () {
        var nh = window.scrollY;
        var op = (h - (h - nh > 0 ? h - nh : 0)) / h * 0.55 + 0.3;
        $('header').css('background', 'rgba(0,0,0,' + op + ')');

    }, 50);
</script>
</body>
</html>